<template>
  <n-config-provider>
    <naive-provider>
      <n-tabs style="height: 100vh;overflow-y: hidden;" type="card" placement="left"
              pane-class="tab_pane_pad overflow-y-scroll">
        <template #prefix>
          <n-image
              width="32"
              src="/appicon.png"
              preview-disabled
              style="padding-top: 30px"
          />
<!--          <n-icon size="28" color="darkorange" class="cursor-pointer" @click="logoClicked">-->
<!--            <MenuIcon/>-->
<!--          </n-icon>-->
          <n-divider></n-divider>
        </template>
        <n-tab-pane name="zl" tab="总览">
          <PortalView/>
        </n-tab-pane>
        <n-tab-pane name="md" tab="行情">
          <MarketView/>
        </n-tab-pane>
        <n-tab-pane name="ps" tab="优选">
          <PreferredView/>
        </n-tab-pane>
        <n-tab-pane name="sc" tab="股票">
          <StockView/>
        </n-tab-pane>
        <n-tab-pane name="config" tab="设置">
          <ConfigView/>
        </n-tab-pane>
        <n-tab-pane name="hello" tab="测试">
          <HelloWorldView/>
        </n-tab-pane>
        <template #suffix>
          <div class="font-bold font-italic font-500" style="color: darkorange">TIT</div>
        </template>
      </n-tabs>
    </naive-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import {Menu as MenuIcon} from "@vicons/ionicons5";
import MarketView from "./views/MarketView.vue";
import HelloWorldView from "./views/HelloWorldView.vue";
import PortalView from "./views/PortalView.vue";
import PreferredView from "./views/PreferredView.vue";
import ConfigView from "./views/ConfigView.vue";
import NaiveProvider from "./components/NaiveProvider.vue";
import StockView from "./views/StockView.vue";

const logoClicked = () => {
  console.log("logoClicked");
}
</script>


<style scoped>
.tab_pane_pad {
  padding: 20px !important;
}

.n-tabs .n-tabs-nav.n-tabs-nav--left, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-nav {
  background-color: #DDDDDD !important;
}
</style>
